<template>
	<view>
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form
				labelPosition="left"
				:model="users"
				:rules="rules"
				ref="uForm"
		>
			<u-form-item
					label="姓名"
					:prop="userName"
					borderBottom
					ref="item1"
			>
				<u--input
						v-model="users.userName"
						border="none"
				></u--input>
			</u-form-item>
			<u-form-item 
				label="头像"
				:prop="image"
				borderBottom
				ref="item2"
			>
				<u-upload
						:fileList="fileList1"
						@afterRead="afterRead"
						@delete="deletePic"
						name="1"
						multiple
						:maxCount="1"
					></u-upload>
			</u-form-item>
		</u--form>
		<u-button @click="submit">提交</u-button>
		<!-- <image v-if="users.image" :src="users.image"></image>
		<image :src="require(''+img)"></image> -->

	</view>
</template>


<script>
	import { mapMutations } from 'vuex';
import {
		mapState
	} from 'vuex'
import user from '../../store/modules/user';
	export default {
		computed: {
			...mapState({
				loginStatus: state => state.user.loginStatus,
				userInfo: state => state.user.userInfo,
			})
		},
		data() {
				return {
					fileList1:[],
					users: {
						id:"",
						userName:"",
						image:""
					},
					rules: {
						'users.userName': {
							type: 'string',
							required: true,
							message: '请填写姓名',
							trigger: ['blur', 'change']
						}
					}
				};
			},
			onLoad() {
				this.users.id=this.userInfo.id
				this.users.userName=this.userInfo.userName
				this.users.image=this.userInfo.image
			},
			methods: {
				
				// 删除图片
							deletePic(event) {
								this[`fileList${event.name}`].splice(event.index, 1)
							},
							// 新增图片
							async afterRead(event) {
								// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
								let lists = [].concat(event.file)
								let fileListLen = this[`fileList${event.name}`].length
								lists.map((item) => {
									this[`fileList${event.name}`].push({
										...item,
										status: 'uploading',
										message: '上传中'
									})
								})
								for (let i = 0; i < lists.length; i++) {
									const result = await this.uploadFilePromise(lists[i].url)
									let item = this[`fileList${event.name}`][fileListLen]
									this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
										status: 'success',
										message: '',
										url: result
									}))
									fileListLen++
								}
							},
							uploadFilePromise(url) {
								return new Promise((resolve, reject) => {
									console.log(url)
									let a = uni.uploadFile({
										url: this.websiteUrl+'TN-INDEX/uploadImg', 
										filePath: url,
										name: 'file',
										formData:{
											user: this.users
										},
										
										success: (res) => {
											setTimeout(() => {
												res.data=JSON.parse(res.data);
												this.users.image=res.data.data;
												this.userInfo.image=this.users.image;
												this.userInfo.userName=this.users.userName;
												uni.setStorage({
													key:"userInfo",
													data:this.userInfo,
													success() {
														console.log("success")
													}
												})
												resolve(res.data.data)
											}, 1000)
										}
									});
								})
							},
				submit() {
						this.$refs.uForm.validate().then(res => {
							uni.request({
								method: "POST",
								url: this.websiteUrl + "TN-USER/user/wx/save",
								data: this.users,
								success:res=>{
									if(res.data.code){
										uni.$u.toast('保存成功'),
										uni.reLaunch({
											url:"/pages/my/my"
										})
										
									}
								}
							})
							}).catch(errors => {
							uni.$u.toast('校验失败')
							})
						}
			},
			onReady() {
				//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
		    	this.$refs.uForm.setRules(this.rules)
		    }
		};
</script>

<style lang="scss">

</style>
